<template>
  <el-card shadow="always" class="m-2 w-full">
    <template #header>
      <div class="flex justify-between">
        <div class="flex justify-center items-center gap-1">
          <List theme="outline" size="18" fill="#333" />
          <span>区段列表</span>
        </div>

        <!-- 新增按钮 -->
        <el-button type="primary" size="default" @click="addSection">
          <Plus theme="outline" size="18" fill="#fff" class="mr-1" />
          新增
        </el-button>
      </div>
    </template>

    <!-- table -->
    <el-table :data="sections" border stripe>
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="name" label="名称" width="250" />
      <el-table-column prop="isData" label="数据" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isData ? 'success' : 'danger'" size="small" @close="">
            {{ scope.row.isData ? '有' : '无' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button-group>
            <!-- 导入文件 -->
            <el-button link size="small" @click="readSectionData(scope.row.id)">
              <FileText theme="outline" size="14" fill="#333" />
            </el-button>

            <!-- 查看信息 -->
            <el-button link size="small" @click="lookSection(scope.row)">
              <Data theme="outline" size="14" fill="#333" />
            </el-button>

            <!-- 作业图 -->
            <el-button link size="small" @click="">
              <Pic theme="outline" size="14" fill="#d35400" />
            </el-button>

            <!-- 编辑 -->
            <el-button link size="small" @click="editSection(scope.row)">
              <Editor theme="outline" size="14" fill="#333" />
            </el-button>

            <!-- 删除 -->
            <el-button link size="small" @click="delelteSection(scope.row)">
              <Delete theme="outline" size="14" fill="#333" />
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <DialogEditSection :visiable="editSectionVisiable" :model="selectSection" @closed="colsed" />
  <DialogAddSection :visiable="addSectionVisiable" :projId="projId" @closed="colsed" />
  <DialogSectionInfo :visiable="SectionInfoVisiable" :sectionId="selectSection?.id" @closed="colsed" />
</template>

<script setup lang="ts">
import { updateSection } from '@/apis/sectionAPI'
import DialogAddSection from '@/components/Dialog/DialogAddSection.vue'
import DialogEditSection from '@/components/Dialog/DialogEditSection.vue'
import DialogSectionInfo from '@/components/Dialog/DialogSectionInfo.vue'
import useSection from '@/composables/useSection'
import { SectionModel } from '@/types/model'
import { Data, Delete, Editor, FileText, List, Pic, Plus } from '@icon-park/vue-next'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'

const route = useRoute()
const { all: allSection, readData, del: delSection, sections } = useSection()

const editSectionVisiable = ref(false)
const addSectionVisiable = ref(false)
const SectionInfoVisiable = ref(false)
const selectSection = ref<SectionModel>()
const projId = ref(1)

allSection({ projId: route.params.id })

// 路由更新时重新获取数据
onBeforeRouteUpdate(async (to) => {
  projId.value = +to.params.id
  await allSection({ projId: projId.value })
})

// 新增区段
async function addSection() {
  addSectionVisiable.value = true
}

// 编辑区段
function editSection(model: SectionModel) {
  editSectionVisiable.value = true
  selectSection.value = model
}

function lookSection(model: SectionModel) {
  SectionInfoVisiable.value = true
  selectSection.value = model
}
// 关闭弹窗
async function colsed() {
  editSectionVisiable.value = false
  addSectionVisiable.value = false
  SectionInfoVisiable.value = false
  await allSection({ projId: projId.value })
}

// 删除区段
async function delelteSection(model: SectionModel) {
  await ElMessageBox.confirm(`是否删除${model.name}区段?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await delSection(model.id!)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
  await allSection({ projId: projId.value })
}

async function readSectionData(id: number) {
  await readData(id)
  await updateSection(id, { isData: true })
  await allSection({ projId: projId.value })
}
</script>
